import React, { useState } from 'react'
import { PlusOutlined } from '@ant-design/icons'
import {
  Button,
  Cascader,
  Checkbox,
  ColorPicker,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Radio,
  Rate,
  Select,
  Slider,
  Switch,
  TreeSelect,
  Upload,
  message,
} from 'antd'
const { RangePicker } = DatePicker
const { TextArea } = Input
const normFile = (e) => {
  if (Array.isArray(e)) {
    return e
  }
  return e === null || e === void 0 ? void 0 : e.fileList
}
const DocTemplate = () => {
  const [componentDisabled, setComponentDisabled] = useState(true)
  const [form] = Form.useForm()

  // 表单提交处理
  const onFinish = (values) => {
    console.log('表单数据:', values)
    message.success('提交成功: ' + JSON.stringify(values))
  }

  // 表单重置
  const onReset = () => {
    form.resetFields()
  }

  // 设置初始值（模拟API获取数据）
  const setInitialValues = () => {
    form.setFieldsValue({
      username: 'admin',
      article: 'admin',
      email: 'test@example.com',
    })
  }

  return (
    <>
      {/* <Checkbox
        checked={componentDisabled}
        onChange={(e) => setComponentDisabled(e.target.checked)}>
        Form disabled
      </Checkbox> */}
      <Form
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 14 }}
        layout="horizontal"
        form={form}
        onFinish={onFinish}
        style={{ maxWidth: 600, padding: '25px' }}>
        <Form.Item label="文档名称" name="username">
          <Input placeholder="请输入文档名称" />
        </Form.Item>

        <Form.Item label="文档内容" name="article">
          <TextArea rows={4} />
        </Form.Item>

        {/* <Form.Item
          label="Upload"
          valuePropName="fileList"
          getValueFromEvent={normFile}>
          <Upload action="/upload.do" listType="picture-card">
            <button
              style={{
                color: 'inherit',
                cursor: 'inherit',
                border: 0,
                background: 'none',
              }}
              type="button">
              <PlusOutlined />
              <div style={{ marginTop: 8 }}>Upload</div>
            </button>
          </Upload>
        </Form.Item> */}

        <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
          <Button type="primary" htmlType="submit" style={{ marginRight: 10 }}>
            提交
          </Button>
          <Button
            htmlType="button"
            onClick={onReset}
            style={{ marginRight: 10 }}>
            重置
          </Button>
          <Button type="dashed" onClick={setInitialValues}>
            加载初始值
          </Button>
        </Form.Item>
      </Form>
    </>
  )
}
export default () => <DocTemplate />
